<template>
    <div class="resource-manage">
        <el-dialog title="提示" :visible.sync="dialogVisible" :before-close="handleClose" width="50%">
            <el-form ref="form" :rules="rules" :inline="true" :model="form" label-width="80px">
                <el-form-item label="权限编号" prop="resCode">
                    <el-input placeholder="请输入权限编号" v-model="form.resCode"></el-input>
                </el-form-item>
                <el-form-item label="权限名称" prop="resName">
                    <el-input placeholder="请输入权限名称" v-model="form.resName"></el-input>
                </el-form-item>
                <el-form-item label="权限中文名称" prop="resNameCn">
                    <el-input placeholder="请输入权限中文名称" v-model="form.resNameCn"></el-input>
                </el-form-item>
                <el-form-item label="权限描述" prop="resDesc">
                    <el-input placeholder="请输入权限描述" v-model="form.resDesc"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel()">取 消</el-button>
                <el-button type="primary" @click="submit()">确 定</el-button>
            </span>
        </el-dialog>
        <div class="manage-header" style="margin-bottom: 30px;">
            <el-button @click="handleAdd()" type="primary" size="small">
                + 新增
            </el-button>

            <el-button @click="getResourceList()" type="primary" size="small">
                获取权限列表
            </el-button>
            <el-button @click="searchResource()" type="primary" size="small">
                搜索
            </el-button>
        </div>

        <!-- user-namage 高度设置为90%了，这里把table设置为它的90% -->
        <el-table height="90%" :data="tableData" style="width: 100%">
            <el-table-column prop="resCode" label="权限编号" width="180">
            </el-table-column>
            <el-table-column prop="resName" label="权限名称" width="180">
            </el-table-column>
            <el-table-column prop="resNameCn" label="权限中文名称" width="180">
            </el-table-column>
            <el-table-column prop="resDesc" label="权限描述" width="180">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button @click="handleUpdate(scope.row)" size="small">
                        修改
                    </el-button>
                    <el-button @click="deleteResource(scope.row.resCode)" type="danger" size="small">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页条 -->
        <div class="block">
            <el-pagination background layout="prev, pager, next" :total="totalCount" @current-change="handlePageChange">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import requestUtil from '../../network/request'
export default {
    data() {
        return {
            dialogVisible: false,
            form: {
                resCode: '',
                resName: '',
                resNameCn: '',
                resDesc: ''
            },
            rules: {
                resCode: [
                    { required: true, message: '请输入权限编号' },
                    { min: 1, max: 20, message: '长度在 1 到 20 个字符' }
                ],
                resName: [
                    { required: true, message: '请输入权限名称' },
                    { min: 1, max: 30, message: '长度在 1 到 30 个字符' }
                ]
            },
            tableData: [],
            opType: 'add', //add-新增 update-修改
            currentPage: 1, // 当前页
            pageSize: 10, // 页大小
            totalPage: 1,
            totalCount: 0
        };
    },
    methods: {
        submit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    if ('add' === this.opType) {
                        // 后续对表单数据的处理
                        requestUtil.post('/roleMgr/resource/add', this.form).then(res => {
                            if (res.code === '0') {
                                this.$message({
                                    message: "新增成功",
                                    type: 'success'
                                })
                                this.getResourceList()
                            } else {
                                this.$message.error(res.msg)
                            }
                        })
                    } else if ('update' === this.opType) {
                        requestUtil.post('/roleMgr/resource/update', this.form).then(res => {
                            if (res.code === '0') {
                                this.$message({
                                    message: "更新成功",
                                    type: 'success'
                                })
                                this.getResourceList()
                            } else {
                                this.$message.error(res.msg)
                            }
                        })
                    }
                    this.handleClose()
                }
            })
        },
        cancel() {
            this.handleClose()
        },
        handleClose() {
            this.dialogVisible = false;
            this.$refs.form.resetFields()
        },
        handleAdd() {
            this.opType = 'add'
            this.dialogVisible = true
        },
        handleUpdate(row) {
            this.opType = 'update'
            this.dialogVisible = true
            // 注意这里需要对数据进行深拷贝，否则会出错 （有点类似java里的地址传递）
            this.form = JSON.parse(JSON.stringify(row))
        },
        searchResource() {

        },
        getResourceList() {
            requestUtil.post('/roleMgr/resource/list', {
                page: {
                    currentPage: this.currentPage,
                    pageSize: this.pageSize
                }
            }).then(res => {
                const list = res.result
                this.tableData = list
                this.totalCount = res.page ? res.page.totalCount : 0
            })
        },
        deleteResource(resCode) {
            requestUtil.post('/roleMgr/resource/del', {
                "resCode": resCode
            }).then(res => {
                if (res.code === '0') {
                    this.$message({
                        message: "删除成功",
                        type: 'success'
                    })
                    this.getResourceList()
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        handlePageChange(currentPage) {
            this.currentPage = currentPage
            this.getResourceList()
        }
    },
    mounted() {
        this.getResourceList()
    }
};
</script>

<style lang="less" scoped>
.resource-manage {
    height: 90%;
}
</style>